;
(function(w, doc) {
    const wrap = doc.getElementById('wrap'),
        pic = wrap.querySelector('.pic'),
        imgEl = wrap.querySelector('.pic  img'),
        ul = wrap.querySelector('ul'),
        li_list = ul.querySelectorAll('li'),
        zoom = wrap.querySelector('.zoom'),
        details = wrap.querySelector('.details')
    ul.addEventListener('click', e => {
        e = e || w.event;
        const target = e.target,
            url = target.src;
        if (target.tagName.toLowerCase() === 'img') {
            imgEl.src = url;
            details.style.backgroundImage = `url(${url})`;
            li_list.forEach(v => { v.className = ' ' })
            target.parentNode.className = 'current';
        }
    }, false)
    pic.addEventListener('mousemove', e => {
        e = e || w.event;
        const getBounding = pic.getBoundingClientRect();
        const halfWidth = zoom.offsetWidth / 2;
        const maxWidth = pic.offsetWidth - zoom.offsetWidth,
            maxHeight = pic.offsetHeight - zoom.offsetWidth;
        let curX = e.clientX - getBounding.left - halfWidth,
            curY = e.clientY - getBounding.top - halfWidth;
        if (curX < 0) {
            curX = 0
        }
        if (curX > maxWidth) {
            curX = maxWidth
        }
        if (curY < 0) {
            curY = 0
        }
        if (curY > maxHeight) {
            curY = maxHeight
        }
        zoom.style.left = curX + 'px';
        zoom.style.top = curY + 'px';
        details.style.backgroundPosition = `${-curX * 2}px  ${-curY * 2}px`
    }, false)

})(window, document)